<template>
  <div class="header-container">
    <div class="header-left">
      {{ date }}
    </div>
    <div class="header-right">
      <svg
        t="1676359931934"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6695"
        width="200"
        height="200"
      >
        <path
          d="M863.02 958.78h-65.18c-52.93 0-96-43.07-96-96V160.71c0-52.93 43.07-96 96-96h65.18c52.93 0 96 43.07 96 96v702.07c0 52.93-43.07 96-96 96z m-65.18-830.07c-17.64 0-32 14.35-32 32v702.07c0 17.64 14.36 32 32 32h65.18c17.64 0 32-14.36 32-32V160.71c0-17.65-14.36-32-32-32h-65.18z"
          fill="#2c2c2c"
          p-id="6696"
        ></path>
        <path
          d="M226.21 958.78h-65.18c-52.93 0-96-43.07-96-96V574.61c0-52.93 43.07-96 96-96h65.18c52.93 0 96 43.07 96 96v288.17c0 52.93-43.07 96-96 96z m-65.18-416.17c-17.65 0-32 14.36-32 32v288.17c0 17.64 14.35 32 32 32h65.18c17.65 0 32-14.36 32-32V574.61c0-17.64-14.35-32-32-32h-65.18z"
          fill="#2c2c2c"
          p-id="6697"
        ></path>
        <path
          d="M542.05 958.78h-65.18c-52.93 0-96-43.07-96-96v-480.3c0-52.93 43.07-96 96-96h65.18c52.93 0 96 43.07 96 96v480.3c0 52.93-43.07 96-96 96z m-65.18-608.3c-17.65 0-32 14.35-32 32v480.3c0 17.64 14.35 32 32 32h65.18c17.64 0 32-14.36 32-32v-480.3c0-17.65-14.36-32-32-32h-65.18z"
          fill="#2c2c2c"
          p-id="6698"
        ></path>
      </svg>
      <svg
        t="1676359717544"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2406"
        width="200"
        height="200"
      >
        <path
          d="M0 352.832l93.12 98.752c231.296-245.44 606.464-245.44 837.76 0L1024 352.832C741.44 53.056 283.008 53.056 0 352.832z m372.352 395.008L512 896l139.648-148.16c-76.8-81.92-202.048-81.92-279.296 0zM186.24 550.4l93.12 98.752c128.448-136.32 336.96-136.32 465.408 0L837.824 550.4c-179.648-190.592-471.488-190.592-651.648 0z"
          fill="#000000"
          p-id="2407"
        ></path>
      </svg>
      <svg
        t="1676359957381"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7670"
        width="200"
        height="200"
      >
        <path
          d="M144.700101 684.994006l535.580045 0L680.280146 359.237781 144.700101 359.237781 144.700101 684.994006 144.700101 684.994006zM918.373823 440.680675l0-81.442894c0-44.791136-36.649711-81.437777-81.437777-81.437777l-692.235944 0c-44.791136 0-81.437777 36.646642-81.437777 81.437777L63.262324 684.994006c0 44.791136 36.646642 81.442894 81.437777 81.442894l692.235944 0c44.788066 0 81.437777-36.650735 81.437777-81.442894l0-81.437777c22.396079 0 40.7194-18.322297 40.7194-40.7194l0-81.436754C959.093223 459.003995 940.769902 440.680675 918.373823 440.680675L918.373823 440.680675zM877.655446 481.400075l0 81.436754L877.655446 684.994006c0 22.395056-18.323321 40.718377-40.7194 40.718377l-692.235944 0c-22.396079 0-40.7194-18.323321-40.7194-40.718377L103.980701 359.237781c0-22.396079 18.323321-40.7194 40.7194-40.7194l692.235944 0c22.396079 0 40.7194 18.323321 40.7194 40.7194L877.655446 481.400075 877.655446 481.400075zM877.655446 481.400075"
          fill="#272636"
          p-id="7671"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
const dayjs = require("dayjs");
export default {
  data() {
    return {
      date: dayjs().format("HH:mm"),
    };
  },
};
</script>

<style scoped lang='scss'>
.header-container {
  width: 100%;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  .header-left {
    width: 108px;
    height: 44px;
    font-size: 34px;
    line-height: 44px;
    margin-left: 24px;
  }
  .header-right {
    width: 150px;
    height: 44px;
    margin-right: 42px;
    display: flex;
    align-items: center;
    svg {
      height: 24px;
    }
  }
}
</style>